<template>
	<view>
		<view class="nav-view config">
			<view class="cell">
				<button class="bind-mobile-btn" plain="true" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"></button>
				<view class="icon">
					<text class="iconfont">&#xe608;</text>
				</view>
				<view class="title">绑定手机号</view>
				<text class="value text-ellipsis">{{userInfo.mobile}}</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
			<view class="cell" @click="bindEmail()">
				<view class="icon">
					<text class="iconfont">&#xe62a;</text>
				</view>
				<view class="title">绑定邮箱</view>
				<text class="value text-ellipsis">{{userInfo.email}}</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		created() {
			this.getUserInfo()
		},
		onShow() {
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取用户详情数据
			 */
			getUserInfo: function(){
				let that = this
				let data = {}
					data.action = 'user_info'
				//动态获取用户数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.userInfo = res.data.data
						}
					}
				})
			},
			
			bindMobile: function(){
				let that = this
				// open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"
				uni.showModal({
					title: '温馨提示',
					content: '请允许授权以便更好的为您提供服务',
					success: function (res) {
						if (res.confirm) {
							that.decryptPhoneNumber()
						}
					}
				})
			},
			
			/**
			 * 绑定邮箱
			 */
			bindEmail: function(){
				this.navigateTo('bind')
			},
			/**
			 * 解密小程序端手机号码
			 * @param {Object} e
			 */
			decryptPhoneNumber: function(e) {
				let that = this
				console.log(e);    
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {    
					console.log('用户拒绝提供手机号');  
				}else{
					console.log('用户同意提供手机号');  
					//console.log(JSON.stringify(e.detail.encryptedData));    
					//console.log(JSON.stringify(e.detail.iv));   
					
					let encryptedData = e.detail.encryptedData;  
					let iv = e.detail.iv;
					let data = {}
						data.action = 'decrypt_mobile'
						data.iv = iv
						data.encryptedData = encryptedData
					//动态获取用户数据
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/ucenter'
						//#endif
						//#ifdef H5
						url = 'entry/site/ucenter'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								console.log(res.data)
								that.getUserInfo()
							}
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon: 'none'
							});
						}
					})
				}
			},
			
			/**
			 * @param {Object} page
			 */
			navigateTo: function(page){
				let that = this
				let url = page
				console.log(url)
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo.memberInfo) {
					uni.navigateTo({
						url: url
					});
				}else{
					this.login()
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		min-height: 100%;
	}
	.nav-view {
		position: relative;
		overflow: hidden;
		margin: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0,0,0,.05);
		background-color: #fff;
		border-radius: 10rpx;
	}
	.cell {
		position: relative;
		display: flex;
		padding: 22rpx 10rpx 22rpx 30rpx!important;
		border-bottom: 2rpx solid #f8f8f8;
		.bind-mobile-btn {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			border: 0;
		}
		.icon {
			width: 48rpx;
		}
		.title {
			flex: 1;
			font-size: 28rpx;
			color: #666;
		}
		.value {
			width: 240rpx;
		}
		.action {
			width: 36rpx;
		}
		&:active {
			background-color: #f2f2f2;
		}
	}
	button.cell {
		background-color: #fff;
	}

</style>
